<template>
  <div class="flex">
    <div @scroll="scrollBottom($event)" class="one w-2/3">
      <el-card v-for="item in actionlist" class="card" :key="item.anme">
        <div>#{{ item.id }}</div>
        <div>111</div>
        <div class="bottom flex">
          <img :src="item.user.avatar" alt="" />
          <span>{{ item.user.username }}({{ item.user.nickname }})</span>
        </div>
      </el-card>
    </div>
    <div class="right">
      <div class="flex items-center">
        <i class="el-icon-search text-2xl text-gray-400"></i>
        <div class="w-250 searchInput el-input el-input--suffix">
          <input
            type="text"
            autocomplete="off"
            placeholder="搜索"
            vlaue
            class="el-input__inner"
          />
        </div>
      </div>
      <div class="block w-1/3">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>
<script>
import { actionList } from "@/api/index";
import { mapActions } from "vuex";
export default {
  name: "ActionList",
  data() {
    return {
      total: 0,
      actionlist: [],
      pagination: {
        page: 1,
        size: 20,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },
  methods: {
    ...mapActions("action", ["getAction"]),
    async _getList() {
      let {
        data: { results, count },
      } = await actionList(this.params);
      this.actionlist = results;
      this.total = count;
      console.log(this.actionlist);
    },
    scrollBottom(e) {
      let Scroll = e.target;
      // 网页可见区域高：document.body.clientHeight
      // 网页正文全文高：document.body.scrollHeight
      let scrollHeight = Scroll.scrollHeight - Scroll.clientHeight;
      this.scrollTop = Scroll.scrollTop;
      // console.log(Scroll.scrollTop);
      if (scrollHeight - Scroll.scrollTop < 5) {
        console.log("到底部了");
        this._getList();
        this.pagination.page++;
        this.pagination.size++;
      }
    },
  },
  computed: {
    // ...mapState("action", ["actionlist"]),
    params() {
      let obj = {};
      obj = {
        ...this.pagination,
      };
      return obj;
    },
  },

  created() {
    this._getList();
    this.getAction();
    this.$watch("params", this._getList, { deep: true });
  },
};
</script>
<style lang="scss" scoped>
.one {
  height: 550px;
  overflow-y: scroll;
}
.block {
  margin-top: 20px;
}
.card {
  margin: 25px;
  height: 160px;
  padding: 20px;
}
.bottom > img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.bottom > span {
  margin-top: 10px;
}
</style>
